<template>
  <a-drawer
    v-model:visible="isDrawer"
    :width="width"
    :title="title"
    unmountOnClose
    placement="right"
    ok-text="提交"
    :ok-loading="subLoading"
    :on-before-ok="formSubmit"
    @cancel="handleReset"
  >
    <a-form
      :model="formParams"
      :rules="rules"
      ref="formRef"
      label-placement="left"
      :label-width="80"
    >
      <a-form-item label="岗位编码" field="postCode">
        <a-input
          placeholder="请输入岗位编码"
          v-model="formParams.postCode"
          :disabled="formParams.postId ? true : false"
        />
      </a-form-item>
      <a-form-item label="岗位名称" field="postName">
        <a-input placeholder="请输入岗位名称" v-model="formParams.postName" />
      </a-form-item>
      <a-form-item label="排序" field="orderNum">
        <a-input-number placeholder="请输入排序" v-model="formParams.orderNum" />
      </a-form-item>
      <a-form-item label="状态" field="isEnable">
        <a-switch v-model="formParams.isEnable">
          <template #checked> 启用 </template>
          <template #unchecked> 禁用 </template>
        </a-switch>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import type { formParamsType } from './types';

  import { addPost, editPost, postInfo } from '@/api/auth/post';

  const rules = {
    postCode: {
      required: true,
      message: '请输入岗位编码',
      trigger: 'blur',
    },
    postName: {
      required: true,
      message: '请输入岗位名称',
      trigger: 'blur',
    },
  };

  const emit = defineEmits(['change']);

  defineProps({
    title: {
      type: String,
      default: '添加岗位',
    },
    width: {
      type: Number,
      default: 450,
    },
  });

  const defaultValueRef = () => ({
    postId: null,
    postCode: '',
    isEnable: true,
    postName: '',
    orderNum: undefined,
  });

  const formRef: any = ref(null);
  const isDrawer = ref(false);
  const subLoading = ref(false);

  const formParams = ref<formParamsType>(defaultValueRef());

  function openDrawer(postId?) {
    if (postId) {
      formParams.value.postId = postId;
      getInfo();
      return;
    }
    isDrawer.value = true;
  }

  function closeDrawer() {
    isDrawer.value = false;
  }

  function formSubmit(done) {
    formRef.value.validate((errors) => {
      if (errors) {
        Message.error('请填写完整信息');
        subLoading.value = false;
        return done(false);
      }

      const msg = formParams.value.postId ? '编辑成功' : '添加成功';
      if (formParams.value.postId) {
        editPost(formParams.value)
          .then((_) => {
            Message.success(msg);
            emit('change');
            handleReset();
            return done(true);
          })
          .catch(() => {
            return done(false);
          });
      } else {
        addPost(formParams.value)
          .then((_) => {
            Message.success(msg);
            emit('change');
            handleReset();
            return done(true);
          })
          .catch(() => {
            return done(false);
          });
      }
    });
  }

  function handleReset() {
    formRef.value.resetFields();
    formParams.value = Object.assign(formParams.value, defaultValueRef());
  }

  function getInfo() {
    postInfo({ id: formParams.value.postId }).then((res) => {
      const params = {
        postId: res.postId,
        postCode: res.postCode,
        isEnable: res.isEnable,
        postName: res.postName,
        orderNum: res.orderNum,
      };
      formParams.value = Object.assign(formParams.value, params);
      isDrawer.value = true;
    });
  }

  defineExpose({
    openDrawer,
    closeDrawer,
  });
</script>
